<template>
  <div class="body">
    <!-- 按钮 -->
    <div class="btn">
      <el-button color="rgb(23,28,73)">一键导出</el-button>
      <el-button color="rgb(23,28,73)" @click="pageHome">首页</el-button>
      <el-button color="rgb(23,28,73)" @click="pagePrev">上一页</el-button>
      <el-button szie="10" @click.stop="pageShow">
        <span class="pageNum">{{ pageNum }}</span>
      </el-button>
      <el-button color="rgb(23,28,73)" @click="pageNext">下一页</el-button>
    </div>

    <!-- 分页器 -->
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceInRight"
      leave-active-class="animate__bounceOutRight"
    >
      <div class="pagination" v-show="isPageShow">
        <el-pagination
          v-model:current-page="pageNum"
          background
          layout="pager,jumper"
          :total="total"
        />
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 引入动画库
import "animate.css";

// 页码 初始值为1
const pageNum = ref(2);

// 每页显示数据条数
const pageSizes = ref(10);

// 数据总条数
const total = ref(1000);
// 改变页码

// 首页
function pageHome() {
  pageNum.value = 1;
}

// 上一页
function pagePrev() {
  pageNum.value === 1 ? 1 : pageNum.value--;
}

// 下一页
function pageNext() {
  pageNum.value === total.value / pageSizes.value
    ? total.value
    : pageNum.value++;
}

// 分页器显示控制器
const isPageShow = ref(false);

// 点击页码按钮时让分页器显示
function pageShow(e) {
  e.preventDefault();
  isPageShow.value = true;
}

// 点击其他地方让分页器隐藏
document.body.addEventListener("click", () => {
  isPageShow.value = false;
});

// 改变go to 为 G
onMounted(() => {
  // 给GoTo按钮添加点击事件 ---让分页器隐藏
  const pageGoTo = document.querySelector(".el-pagination__goto");
  pageGoTo.innerHTML = "G";
  pageGoTo.addEventListener("click", () => {
    isPageShow.value = false;
  });

  // 获取页码输入框dome元素
  const jumpWarpper = document.querySelector(
    ".el-pagination__jump .el-input__wrapper"
  );

  // 阻止页码输入框的点击事件冒泡
  jumpWarpper.addEventListener("click", (e) => {
    e.stopPropagation();
  });

  // 在页码器输入页码后回车让页码器隐藏
  jumpWarpper.addEventListener("keydown", (event) => {
    if (event.keyCode === 13) {
      isPageShow.value = false;
    }
  });
});
</script>

<style lang="less" scoped>
.body {
  position: relative;
  width: 350px;
  .btn {
    display: flex;
    width: 346px;
    justify-content: center;
    align-items: center;
    .el-button {
      font-weight: bold;
      padding: 30px 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .pageNum {
      font-weight: 700;
      font-size: 16px;
      border-bottom: 1px solid rgb(23, 28, 73);
    }
  }
  .pagination {
    background-color: white;
    width: 346px;
    height: 66px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    :deep(.el-pagination) {
      --el-pagination-button-bg-color: none;
      --el-pagination-button-width: 16px;
      // --el-pagination-border-radius: none:
      --el-pagination-border-radius: 0px;
      --el-pagination-button-height: auto;
      .el-pager li {
        padding: 0;
        width: 10px;
      }
      li.is-active {
        color: black;
        background-color: transparent;
        font-weight: 400;
        border-bottom: 1px solid black;
      }
    }
    :deep(.el-pagination__jump) {
      margin-left: 0;
      flex-direction: row-reverse;
      .el-pagination__editor.el-input {
        width: 40px;
        margin-right: 5px;
      }
      .el-input__wrapper {
        padding: 0;
      }
    }
  }
}
:deep(.el-pagination__jump) {
  flex-direction: row-reverse;
  .el-pagination__goto {
    border: 1px solid black;
    color: white;
    background-color: rgb(23, 28, 73);
    width: 30px;
    height: 28px;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
  }
}
</style>
